<template>
  <a-layout class="admin-dashboard">
    <a-layout-sider width="250" theme="dark" class="sider">
      <div class="logo">Admin Panel</div>
      <a-menu
          mode="inline"
          :selectedKeys="[selectedMenuItem]"
          theme="dark"
          @click="changeMenuItem"
      >
        <a-menu-item key="dashboard">
          <router-link to="/admin/dashboard">
            <DashboardOutlined />
            <span>仪表盘</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="users">
          <router-link to="/admin/users">
            <UserOutlined />
            <span>用户管理</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="products">
          <router-link to="/admin/products">
            <ShoppingOutlined />
            <span>商品管理</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="orders">
          <router-link to="/admin/orders">
            <ShoppingCartOutlined />
            <span>订单管理</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="analytics">
          <router-link to="/admin/analytics">
            <BarChartOutlined />
            <span>数据分析</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="settings">
          <router-link to="/admin/settings">
            <SettingOutlined />
            <span>系统设置</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-content class="content transition-all duration-300 ease-in-out">
      <a-page-header
          :title="pageTitle"
          :sub-title="pageSubTitle"
          @back="onBack"
      />
      <div class="content-area">
        <router-view></router-view>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
  DashboardOutlined,
  UserOutlined,
  ShoppingOutlined,
  ShoppingCartOutlined,
  BarChartOutlined,
  SettingOutlined
} from '@ant-design/icons-vue';

const router = useRouter();
const route = useRoute();

const selectedMenuItem = computed(() => route.name);

const pageTitle = computed(() => {
  const titles = {
    dashboard: '仪表盘',
    users: '用户管理',
    products: '商品管理',
    orders: '订单管理',
    analytics: '数据分析',
    settings: '系统设置'
  };
  return titles[route.name] || '';
});

const pageSubTitle = computed(() => {
  const subTitles = {
    dashboard: '系统概览',
    users: '管理系统用户',
    products: '管理商品信息',
    orders: '查看和处理订单',
    analytics: '查看系统数据分析',
    settings: '配置系统设置'
  };
  return subTitles[route.name] || '';
});

const changeMenuItem = ({ key }) => {
  router.push({ name: key });
};

const onBack = () => {
  router.push('/');
};
</script>

<style scoped>
.admin-dashboard {
  min-height: 100vh;
}

.sider {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  background: linear-gradient(to bottom, #001529, #003a8c);
}

.logo {
  height: 64px;
  margin: 16px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 64px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.content {
  padding: 0 24px 24px;
  background: #fff;
}

.content-area {
  background: #fff;
  padding: 24px;
  min-height: 280px;
  height: calc(100vh - 112px);
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>

